<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>返回</text>
			</view>
			<view class="head_mid">
				选择课节
			</view>
			<view class="head_right">

			</view>
		</view>
		<view class="padding-box">
			<view class="body">
				<view class="timeZone" @tap="showTimeZone">
					<!-- <text>{{thisZone}}</text> -->
					<text v-if="myoffset>0">CMT+{{myoffset}}</text>
					<text v-else>CMT{{myoffset}}</text>
					<image src="../../../static/jingjie/xiala.png" mode=""></image>
					<scroll-view scroll-y class="zoneBox" v-if="isshowList">
						<view class="zoneItem" v-for="(item,index) in zoneList" :key="index" @tap="selectZone(item.describe_info,item.timezone,item.id)">{{item.describe_info}}{{item.timezone}}</view>
					</scroll-view>
				</view>
				<view class="bodyBox" v-for="(item,index) in timeList" :key="index">
					<text class="timeName">{{item.name}}</text>
					<view class="timeBox">
						<view class="time_item" v-for="(item1,index1) in item.time" :key="index1" @tap="selectTime(index,index1)" :class="{active:item1.select===true}">
							{{item1.num}}
						</view>
					</view>
				</view>
				<view class="btn" @tap="toSure">
					确定
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeList: [{
						name: '凌晨',
						time: [{
								num: '00:00~00:30',
								select: false
							}, {
								num: '00:30~01:00',
								select: false
							}, {
								num: '01:00~01:30',
								select: false
							}, {
								num: '01:00~01:30',
								select: false
							}, {
								num: '02:00~02:30',
								select: false
							}, {
								num: '02:30~03:00',
								select: false
							}, {
								num: '03:00~03:30',
								select: false
							},
							{
								num: '03:30~04:00',
								select: false
							}, {
								num: '04:00~04:30',
								select: false
							}, {
								num: '04:30~05:00',
								select: false
							}, {
								num: '05:00~05:30',
								select: false
							}, {
								num: '05:30~06:00',
								select: false
							}
						]
					},
					{
						name: '早上',
						time: [{
							num: '06:00~06:30',
							select: false
						}, {
							num: '06:30~07:00',
							select: false
						}, {
							num: '07:00~07:30',
							select: false
						}, {
							num: '07:30~08:00',
							select: false
						}]
					},
					{
						name: '上午',
						time: [{
								num: '08:00~08:30',
								select: false
							}, {
								num: '08:30~09:00',
								select: false
							}, {
								num: '09:00~09:30',
								select: false
							}, {
								num: '09:30~10:00',
								select: false
							}, {
								num: '10:00~10:30',
								select: false
							}, {
								num: '10:30~11:00',
								select: false
							}, {
								num: '11:00~11:30',
								select: false
							},
							{
								num: '11:30~12:00',
								select: false
							}
						]
					},
					{
						name: '中午',
						time: [{
							num: '12:00~12:30',
							select: false
						}, {
							num: '12:30~13:00',
							select: false
						}, {
							num: '13:00~13:30',
							select: false
						}, {
							num: '13:30~14:00',
							select: false
						}]
					},
					{
						name: '下午',
						time: [{
								num: '14:00~14:30',
								select: false
							}, {
								num: '14:30~15:00',
								select: false
							}, {
								num: '15:00~15:30',
								select: false
							}, {
								num: '15:30~16:00',
								select: false
							}, {
								num: '16:00~16:30',
								select: false
							}, {
								num: '16:30~17:00',
								select: false
							}, {
								num: '17:00~17:30',
								select: false
							},
							{
								num: '17:30~18:00',
								select: false
							}
						]
					}, {
						name: '晚上',
						time: [{
								num: '18:00~18:30',
								select: false
							}, {
								num: '18:30~19:00',
								select: false
							}, {
								num: '19:00~19:30',
								select: false
							}, {
								num: '19:30~20:00',
								select: false
							}, {
								num: '20:00~20:30',
								select: false
							}, {
								num: '20:30~21:00',
								select: false
							}, {
								num: '21:00~21:30',
								select: false
							},
							{
								num: '21:30~22:00',
								select: false
							}, {
								num: '22:00~22:30',
								select: false
							}, {
								num: '22:30~23:00',
								select: false
							}, {
								num: '23:00~23:30',
								select: false
							}, {
								num: '23:30~24:00',
								select: false
							}
						]
					}
				],
				zoneList: '', //时区列表
				isshowList: false,
				thisZone: '',
				timecode: '',
				timezone_id: '',
				date: "",
				entities: [], //时间段集合
				timeArr: [],
				myoffset:"",//我的时区
			}
		},
		onLoad(option) {
			if (option.month < 10) {
				option.month = '0' + option.month
			}
			if (option.day < 10) {
				option.day = '0' + option.day
			}
			console.log(option,'路径参数')
			this.date = option.year + '-' + option.month + '-' + option.day
			// this.timeArr=JSON.stringify(option.time)
			this.timeArr = option.time.split(',')
			console.log(this.date)
			console.log(this.timeArr)
		},
		onShow() {
			this.gettimeZone()
			this.gettimeArr()
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// getClass(){
			// 	var data={
			// 		start_time:this.date+' '+'00:00:00',
			// 		end_time:this.date+' '+'24:00:00',
			// 		master_id:uni.getStorageSync('user_id'),
			// 	}
			// 	this.myAjaxNew({
			// 		model: 'user',
			// 		controllerName: 'masterAppointment',
			// 		actionName: 'query',
			// 		data: data,
			// 		successBack: function(res) {
			// 			
			// 		}
			// 	})
			// },
			gettimeZone() {
				this.myoffset=(new Date().getTimezoneOffset() / 60) * -1
				var me = this
				var data = {
					sortName: 'offset'
				}
				this.myAjaxNew({
					model: 'user',
					controllerName: 'timeZone',
					actionName: 'query',
					data: data,
					successBack: function(res) {
						console.log(res, '时区列表')
						me.zoneList = res.data.data
						for(var i=0;i<me.zoneList.length;i++){
							if(me.zoneList[i].offset==me.myoffset){
								me.thisZone=me.zoneList[i].describe_info
								me.timezone_id=me.zoneList[i].id
								me.timecode=me.zoneList[i].timezone.replace('GMT', '')
								console.log(me.thisZone,me.timezone_id,me.timecode)
								return
							}
						}
					},
				})
			},
			gettimeArr() {
				for (var j = 0; j < this.timeList.length; j++) {
					for (var a = 0; a < this.timeList[j].time.length; a++) {
						for (var i = 0; i < this.timeArr.length; i++) {
							if(this.timeList[j].time[a].num==this.timeArr[i]){
								this.timeList[j].time[a].select=true
								// console.log(this.timeList[j].time[a])
							}
						}
					}
				}
				
			},
			showTimeZone() {
				if (this.isshowList == true) {
					this.isshowList = false
				} else {
					this.isshowList = true
				}
			},
			selectZone(item, num, id) {
				this.thisZone = item
				this.timecode = num.replace('GMT', '')
				if (this.timecode == '') {
					this.timecode = 0
				}
				this.timezone_id = id
				// console.log(this.timecode)
			},
			selectTime(i, j) {
				if (this.timeList[i].time[j].select == false) {
					this.timeList[i].time[j].select = true
				} else {
					this.timeList[i].time[j].select = false
				}

			},
			toSure() {
				for (var i = 0; i < this.timeList.length; i++) {
					for (var j = 0; j < this.timeList[i].time.length; j++) {
						if (this.timeList[i].time[j].select == true) {
							var arr = this.timeList[i].time[j].num.split('~')
							var obj = {
								master_id: uni.getStorageSync('user_id'),
								timezone_id: this.timezone_id,
								offset: this.timecode,
							}
							var start_time = this.date + ' ' + arr[0] + ':00'
							var end_time = this.date + ' ' + arr[1] + ':00'
							obj.start_time = start_time
							obj.end_time = end_time
							this.entities.push(obj)
						}
					}
				}
				var data = {
					entities: JSON.stringify(this.entities)
				}
				this.myAjaxNewPost({
					model: 'user',
					controllerName: 'masterAppointment',
					actionName: 'insert',
					data: data,
					successBack: function(res) {
						if (res.data.message == '成功') {
							uni.navigateBack({
								delta: 1
							})
							uni.showToast({
								title: '添加成功',
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}
					},
				})
			},
		}
	}
</script>

<style scoped>
	.head {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 128upx;
		background: #ffffff;
		padding: 0 24upx;
		z-index: 200;
		position: fixed;
		top: 0;
	}

	.head image {
		width: 20upx;
		height: 36upx;
		margin-right: 9upx;
	}

	.head_left {
		height: 82upx;
		display: flex;
		align-items: center;
		line-height: 82upx;
		color: #666666;
		font-size: 32upx;

	}

	.head_right {
		width: 92upx;
	}

	.padding-box {
		padding-top: 148upx;
	}

	.body {
		background: #FFFFFF;
		padding-bottom: 70upx;
	}

	.timeZone {
		display: flex;
		align-items: center;
		color: #333333;
		font-size: 40upx;
		font-weight: bold;
		padding: 0 24upx;
		border-bottom: 1upx solid #E6E6E6;
		padding-top: 60upx;
		padding-bottom: 38upx;
		margin-bottom: 40upx;
		position: relative;
	}

	.timeZone image {
		width: 28upx;
		height: 14upx;
		margin-left: 14upx;
	}

	.bodyBox {
		padding: 0 24upx;
	}

	.timeName {
		color: #333333;
		font-size: 32upx;
		font-weight: bold;
	}

	.timeBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding-top: 20upx;
		border-bottom: 1upx solid #E6E6E6;
		border-top: 1upx solid #E6E6E6;
		margin-bottom: 40upx;
	}

	.time_item {
		height: 45upx;
		line-height: 45upx;
		text-align: center;
		width: 146upx;
		border-radius: 20upx;
		border: 1upx solid #E6E6E6;
		color: #999999;
		font-size: 20upx;
		margin-right: 12upx;
		margin-bottom: 20upx;
	}

	.btn {
		border-radius: 44upx;
	}

	.zoneBox {
		display: flex;
		flex-direction: column;
		/* text-align: center; */
		max-height: 600upx;
		overflow: hidden;
		border: 1upx solid #E6E6E6;
		position: absolute;
		top: 115upx;
		left: 20upx;
		background: #FFFFFF;
		width: 200upx;
		font-weight: 100;
	}

	.zoneItem {
		color: #999999;
		font-size: 26upx;
		line-height: 50upx;
		border-bottom: 1upx solid #E6E6E6;
	}

	.active {
		background: #33CBCC;
		color: #FFFFFF;
	}
</style>
